import { getQueryParams } from '@/utils/utils';
import { Button, Modal } from 'antd';
import QRCode from 'qrcode.react';
import styles from '../index.less';

interface Props {
  visible: boolean;
  onCancel: () => void;
  moneyCount: any;
  rechargeMoney: () => void;
}

const QRcode: React.FC<Props> = ({ visible, onCancel, rechargeMoney }) => {
  const qs = getQueryParams();
  return (
    <Modal
      className={styles.rechargeModal}
      visible={visible}
      onCancel={onCancel}
      width={700}
      centered
      footer={[
        <Button key={'1'} onClick={rechargeMoney}>
          确认充值
        </Button>,
      ]}
    >
      <div className={styles.qscodeDiv}>
        <QRCode
          value={`尊敬的${qs.nickname}，您已扫码成功，请在点击电脑端确认按钮以完成支付！`}
          size={200} // 二维码的大小
          fgColor="#000000" // 二维码的颜色
          style={{ margin: 'auto' }}
          imageSettings={{
            // 二维码中间的logo图片
            src: require('@/assets/images/logo.png'),
            height: 43,
            width: 43,
            excavate: true, // 中间图片所在的位置是否镂空
          }}
        />
      </div>
    </Modal>
  );
};

export default QRcode;
